<!--
 * @Author       : wfl
 * @LastEditors  : wfl
 * @description  :
 * @updateInfo   :
 * @Date         : 2023-05-30 11:25:50
 * @LastEditTime : 2023-12-27 14:34:00
-->
<script setup lang="ts" name="IkPageTable">
import { defaultProps } from './props'

const props = defineProps(defaultProps)
const emit = defineEmits<{
  'selection-change': [row: any]
  'page-change': [page: any]
  'sort-change': any
}>()

const { attrs }: { attrs: any; } = getCurrentInstance()!
const page = ref({
  page: attrs.page?.page || 1,
  rows: 15
})

// 向表格数据添加索引
const insertIndexTable = computed(() => props.tableData)

// 分页修改
const handSearchPage = (val: any) => {
  page.value = val
  emit('page-change', val)
  props.search()
}

const chooseList = ref([])
// 表格选中项变化
const handleSelectionChange = (val: any) => {
  chooseList.value = val
  emit('selection-change', val)
}

const handleSortChange = (column: any) => {
  emit('sort-change', column)
}

const setIndex = (index: number) => {
  const { page: _page, rows } = attrs?.page || page.value
  return _page === 1 ? index + 1 : ((_page - 1) * rows) + index + 1
}

const refTable = ref()
defineExpose({ table: refTable })
</script>

<template>
  <!-- 自定义表格 -->
  <template v-if="$slots?.table">
    <slot name="table"></slot>
  </template>
  <!-- 默认表格 -->
  <template v-else>
    <!-- <div :key="tabId"> -->
    <el-table
      ref="refTable"
      v-loading="loading"
      v-bind="{ ...$attrs, ...props }"
      :data="insertIndexTable"
      style="width: 100%;"
      :tooltip-options="{
        popperClass: 'ik-table-popper',
      }"
      row-key="id"
      :show-header="showTableHeader"
      @selection-change="handleSelectionChange"
      @sort-change="handleSortChange"
    >
      <el-table-column
        v-if="selection"
        type="selection"
        :selectable="selectable as any"
        align="center"
        width="56"
      />
      <el-table-column
        v-if="serial"
        type="index"
        :index="setIndex"
        prop="__index"
        label="序号"
        :width="65"
        align="center"
        fixed="left"
      />
      <slot></slot>
    </el-table>
    <!-- </div> -->
  </template>
  <!-- 分页 -->
  <IkPage
    v-show="total"
    :current="($attrs as any)?.page?.page || 1"
    :total="total"
    :search="handSearchPage"
  />
</template>

<style lang="scss" scoped>
// .el-table{
//   height: 100%;
// }
</style>
